import React, { PureComponent } from 'react';
// 引入样式
import './address.scss';
// 引入框架
import { Input, Button, message } from 'antd';
// 发送axios
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website'
export default class Phone extends PureComponent {
  constructor() {
    super()
    this.state = {
      // ip地址输入框
      input: '',
      // 国家
      Card: '',
      // 省份
      Operators: '',
      // 城市
      AreaCode: '',
      // 运营商
      Postcode: ''
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 按钮的点击事件
  ClickPhone = () => {
    const _this = this;
    var myreg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/;
    if (!this.state.input) {
      message.error({ content: '请输入ip地址', className: 'bulletChatMessage' });
      return;
    } else if (!myreg.test(this.state.input)) {
      message.error({ content: '您的ip地址格式不正确', className: 'bulletChatMessage' });
      return;
    }
    // 查询ip地址的请求
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/lifeIp", { ip: this.state.input }).then(err => {
      if (err.data.code === 'F0007') {
        let data = err.data.data.result;
        _this.setState({
          // 卡号归属地
          Card: data.Country,
          // 运营商
          Operators: data.Province,
          // 区号
          AreaCode: data.City,
          // 邮编
          Postcode: data.Isp
        })
        return;
      }
      if (err.data.code === 'F0008') {
        alert('当日可用请求已达上限');
        return;
      }
    }).catch(() => {
      message.error({ content: '请检查您的网络连接', className: 'bulletChatMessage' });
    })
  }

  render () {
    let { Card, Operators, AreaCode, Postcode } = this.state;
    return (
      <div className='addressIp'>
        <div className='phone_top'>
          <Input placeholder="请输入要查询的ip地址" className='phone_input' value={this.state.input} name='input' onChange={this.handleInput} autoComplete="off" maxLength='20' />
          <Button type="primary" className='phone_button' onClick={this.ClickPhone}>查询</Button>
        </div>
        <div className='phone_title'>
          <div className='phone_h1'>+++查询结果+++</div>
          <div className='phone_body'>
            {/* 左侧固定内容 */}
            <ul className='phone_body_left'>
              <li>国家/地区</li>
              <li>省份</li>
              <li>城市</li>
              <li>运营商</li>
            </ul>
            {/* 右侧显示的内容 */}
            <ul className='phone_body_right'>
              <li>{Card}</li>
              <li>{Operators}</li>
              <li>{AreaCode}</li>
              <li>{Postcode}</li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}